import { defineComponent, ref, unref, computed } from 'vue';
import './DeckSelectCardList.less';
import type { DeckDetail, DeckCardItem } from '/@/api/gateruler/model/deckModel';
import { concat, trimEnd, uniq } from 'lodash-es';
import { useOptions } from '/@/views/gateruler/hooks/useOptions';
import { ClassEnum } from '/@/api/gateruler/model/cardModel';
import DeckCardDetail from '/@/views/gateruler/components/DeckCardDetail/DeckCardDetail';

export default defineComponent({
  name: 'GateRuleDeckSelectCardList',
  props: {
    ruler: {
      type: Object as PropType<DeckDetail['ruler']>,
      required: true,
    },
    cntCards: {
      type: Object as PropType<DeckDetail['cnt_cards']>,
      required: true,
    },
    otherCards: {
      type: Object as PropType<DeckDetail['other_cards']>,
      required: true,
    },
  },
  setup(props) {
    const { rulerGroupCard } = useOptions();
    const rulerObject = computed(() => {
      return rulerGroupCard(props.ruler.other_ename!);
    });

    const detailState = ref(false);
    const detailCardIdState = ref(0);

    const allCards = computed(() => {
      const { cntCards, otherCards } = props;
      return concat(cntCards, otherCards);
    });

    const cardSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        num += item.number!;
      });
      let style = '';
      if (unref(rulerObject).maxTotal >= 0 && num > unref(rulerObject).maxTotal) {
        style = 'text-red-500';
      }
      return {
        num,
        style,
      };
    });
    const legendSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        if (item.card_class === ClassEnum.L) {
          num += item.number!;
        }
      });
      let style = '';
      if (unref(rulerObject).maxLegendTotal >= 0 && num > unref(rulerObject).maxLegendTotal) {
        style = 'text-red-500';
      }
      return {
        num: num,
        style,
      };
    });
    const levelSum = computed(() => {
      let num = 0;
      unref(allCards).map((item) => {
        num += item.number! * item.level!;
      });
      let style = '';
      if (unref(rulerObject).maxLevel >= 0 && num > unref(rulerObject).maxLevel) {
        style = 'text-red-500';
      }
      return {
        num,
        style,
      };
    });
    const legionSum = computed(() => {
      let legionStr = '';
      unref(allCards).map((item) => {
        item.legion ? (legionStr += item.legion! + ',') : null;
      });
      const legionArray = legionStr ? uniq(trimEnd(legionStr, ',').split(',')) : [];
      let style = '';
      if (unref(rulerObject).maxLegion >= 0 && legionArray.length > unref(rulerObject).maxLegion) {
        style = 'text-red-500';
      }
      return {
        num: legionArray.length,
        style,
      };
    });
    const cntSum = computed(() => {
      const { cntCards } = props;
      let num = 0;
      cntCards.map((item) => {
        num += item.number!;
      });
      let style = '';
      if (unref(rulerObject).maxCNT >= 0 && num > unref(rulerObject).maxCNT) {
        style = 'text-red-500';
      }
      return {
        num,
        style,
      };
    });
    const otherSum = computed(() => {
      const { otherCards } = props;
      let num = 0;
      otherCards.map((item) => {
        num += item.number!;
      });
      return num;
    });

    const CardItems = ({ dataArray }: { dataArray: DeckCardItem[] }) => {
      return (
        <ul class={'sel-card-area flex flex-wrap'}>
          {dataArray.map((item) => {
            return (
              <li
                class={'sel-card-item'}
                onClick={() => {
                  detailState.value = true;
                  detailCardIdState.value = item.card_id!;
                }}
              >
                <div class={'image'}>
                  <img src={item.img} alt='' />
                </div>
                {item.number! > 1 ? (
                  <div class={'nums'}>
                    <span>X{item.number}</span>
                  </div>
                ) : null}
              </li>
            );
          })}
        </ul>
      );
    };

    return () => (
      <div class={'gateruler-deck-select-container'}>
        <ul class={'nums-list flex flex-wrap justify-between text-xs'}>
          <li>
            总牌数：<span class={unref(cardSum).style}>{unref(cardSum).num}</span>
          </li>
          <li>
            传奇数：<span class={unref(legendSum).style}>{unref(legendSum).num}</span>
          </li>
          <li>
            总等级：<span class={unref(levelSum).style}>{unref(levelSum).num}</span>
          </li>
          <li>
            军团数：<span class={unref(legionSum).style}>{unref(legionSum).num}</span>
          </li>
        </ul>

        <div class={`cards-box ${!unref(cntSum).num ? 'hidden' : ''}`}>
          <h2 class={'text-xs'}>
            CNT牌：<span class={unref(cntSum).style}>{unref(cntSum).num}</span>
          </h2>
          <CardItems dataArray={props.cntCards} />
        </div>
        <div class={`cards-box ${!unref(otherSum) ? 'hidden' : ''}`}>
          <h2 class={'text-xs'}>
            其他牌：<span>{unref(otherSum)}</span>
          </h2>
          <CardItems dataArray={props.otherCards} />
        </div>
        <DeckCardDetail v-model={[detailState.value, 'show']} cardId={detailCardIdState.value} />
      </div>
    );
  },
});
